<template>
  <div class="releaseInvitation nav">
    <van-nav-bar title="发布帖子" left-arrow @click-left="$router.history.go(-1)">
      <span slot="right" class="releaseBtn" @click="releaseBtn">发布</span>
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="reason">
      <textarea placeholder="同学们，尽情发挥吧…" v-model="messageInfo.content"></textarea>
    </div>
    <div class="pic ml-30 addPic flex flex-wrap">
      <img v-for='(item,index) in messageInfo.image' :key='index' :src="item"/>
      <td-upload @upload-img="headPortrait" ></td-upload>
      <!-- <div class="van-uploader"><input type="file" accept="image/png,image/jpg,image/jpeg" @change="change($event)" class="van-uploader__input"></div> -->
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageInfo: {
        postCategoryId: 1,
        image:[]
      },
    };
  },
  methods: {
    change( event ) {
      let that=this;
      console.log(event)
      this.clip(event , {
        resultObj : '',
        aspectRatio : 1
      },function(data){
        if(data) that.messageInfo.image.push(data);
      })
    },
    releaseBtn() {
      if (!this.messageInfo.content) {
        this.$toast("请先输入内容");
        return;
      }
      if (this.messageInfo.image==0) {
        this.$toast("请先上传图片");
        return;
      }
      this.messageInfo.images=JSON.stringify(this.messageInfo.image);
      this.messageInfo.content=JSON.stringify({content:this.messageInfo.content});
      this.$post(this.$api.blog.postsPublish, this.messageInfo).then(data => {
        this.$toast.success('发送成功');
        this.$router.push({path:'/home',query:{active:0}})
      });
    },
    headPortrait(e) {
      // this.$set(this.messageInfo, "images", e);
      this.messageInfo.image.push(e)
      console.log(this.messageInfo);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.forms .name {
  width: 1rem;
  height: 0.6rem;
  border-radius: 0.29rem;
  font: 0.28rem/0.6rem "微软雅黑";
  text-align: center;
  background-color: #f5f5f5;
  margin-right: 0.3rem;
}
.forms input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  color: #cccccc;
  font: 0.3rem/0.6rem "微软雅黑";
}
textarea {
  font: 0.3rem/0.4rem "微软雅黑";
  color: #cccccc;
  border: none;
  outline: none;
  width: 100%;
  height: 2rem;
  margin-left: 0.2rem;
}
.reason {
  position: relative;
  padding: 0.3rem;
}
.reason:before {
  content: "";
  width: 0.04rem;
  height: 0.4rem;
  background-color: #4aace9;
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
}
.addPic {
  
  /* height: 1.8rem; */
}
.addPic img {
  width: calc((100vw - 0.6rem - 0.2rem)/3);
  height: calc((100vw - 0.6rem - 0.2rem)/3);
  display: inline-block;
  /* margin-right: 0.2rem; */
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
}
.addPic img:nth-of-type(3n){
  margin-right: 0;
}
</style>
